<template>
    <view
        class="banner"
        v-if="list.length > 0"
        :style="{
            height
        }"
    >
        <swiper>
            <swiper-item class="banner__item" v-for="(item, index) in list" :key="index">
                <image mode="widthFit" :style="{ height }" :src="item.pick" @tap="toLink(item)" />
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            height: 0
        };
    },

    created() {
        this.refresh();
    },

    methods: {
        refresh() {
            this.$service.banner
                .page({
                    page: 1,
                    size: 20,
                    status: 1,
                    scenarioId: 4,
                    order: 'level',
                    sort: 'desc'
                })
                .then(res => {
                    const h = res.list[0] ? res.list[0].imageSize : 193;
                    this.list = res.list;
                    this.height = h + 'rpx';
                });
        },

        toLink(item) {
            if (item.type == 3) {
                this.$root.openRP(() => {
                    if (item.link) {
                        uni.navigateTo({
                            url: item.link
                        });
                    }
                });
            } else if (item.type == 4) {
                uni.navigateTo({
                    url: '/pages/h5/index?url=' + item.link
                });
            } else if (item.type == 5) {
                let url = item.link;
                let index = url.indexOf('?');
                let id = url.slice(0, index);
                let path = url.slice(index + 1);
                console.log(id);
                console.log(path);
                uni.navigateToMiniProgram({
                    appId: id,
                    path: path,
                    success(res) {
                        console.log(res);
                    },
                    fail(err) {
                        console.log(err);
                    }
                });
            } else {
                let url = item.link;
                if (url) {
                    this.$sdk.api('jdtrade', {
                        url
                    });
                }
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.banner {
    width: 100%;
    border-radius: 16rpx;
    overflow: hidden;
    box-sizing: border-box;

    &__item {
        image {
            width: 100%;
            border-radius: 16rpx;
            // background-color: #f7f7f7;
        }
    }
}
</style>
